<template>
  <div>
    <p>SlotDemo</p>
    <!-- slot插槽 -->
    <!-- 1、用来做内容分发，合成组件 -->
    <!-- 具体做法是，在子组件声明插槽，在父组件中传入插槽内容，以达到和props类似的效果，但它比props更灵活。props有点像枚举，而slot则无此限制 -->
    <navigator-link :url="'/user'">
      Your Profile
    </navigator-link>

    <!-- 2、编译作用域，父组件只能用父组件上的值，子组件只能用子组件上的值。如果要在传入插槽时，父组件上使用子组件的值，可以在子组件添加插槽prop，然后在父组件中使用v-slot获取 -->
    <!-- <navigator-link :url="'/user'">
      Logged in as {{user.name}}
    </navigator-link> -->

    <!-- 3、后备插槽 -->
    <!-- 声明slot中的默认内容 -->
    <!-- <navigator-link :url="'/user'">
      
    </navigator-link> -->

    <!-- 4、具名插槽 -->
    <!-- 有多个插槽时，便于分别传入 -->
    <!-- <navigator-link :url="'/user'">
      <template v-slot:start>
        (start content)
      </template>
      <template v-slot:default>
        aaaaaa
      </template>
      <template v-slot:end>
        (end content)
      </template>
    </navigator-link> -->

  </div>
</template>

<script>

import NavigatorLink from './NavigatorLink.vue'

export default {
  components: {
    NavigatorLink
  },
  data() {
    return {
      user: {
        name: 'Aaron'
      }
    }
  }
}
</script>